<template>
    <div class="container">
        <div class="checkall">
            <!-- 使用事件方法实现全选 -->
            <!-- <input type="checkbox" @change="setCheckState" v-model="allState">全选 -->
            <!-- 使用侦听器方法实现全选 -->
            <input type="checkbox" v-model="allState">全选
        </div>
        <p>总价：{{total}}</p>
    </div>
</template>
<script>
export default {
            name:'Count',
            template: "#count",
            data(){
                return {
                    allState:false,
                    total:0
                }
            },
            methods:{
                //全选复选框选择时触发事件
                setCheckState(){
                    //触发事件实现传参
                    this.$bus.$emit('e_setcheck',this.allState)
                }
            },
            watch:{
                'allState':function(newVal){
                    // alert(this)      注意侦听器方法中this的指向
                     //触发事件实现传参
                     this.$bus.$emit('e_setcheck',this.allState)
                }
            },
            created(){
                this.$bus.$on('e_count',(value) => {
                    this.total = value
                })
            }
        }
</script>
<style scoped>
.container{
    width: 1000px;
}
.checkall{
    float: left;
}
p{
    float:right;
}
</style>